// @import "./inc";
// @import "./reset";
// @import "./animate/0.0.1/animate";
// @import "./animate/0.0.1/_fading-entrances/fading-entrances";
// @import "./animate/0.0.1/_zooming-entrances/zoomIn";
// @import "./animate/0.0.1/_zooming-entrances/zoomInUp";
// @import "./animate/0.0.1/_zooming-entrances/zoomInDown";
// @import "./animate/0.0.1/_zooming-entrances/zoomInLeft";
// @import "./animate/0.0.1/_zooming-entrances/zoomInRight";
// @import "./animate/0.0.1/_bouncing-entrances/bouncing-entrances";
// @import "./animate/0.0.1/_attention-seekers/attention-seekers";
// @import "./animate/0.0.1/_rotating-entrances/rotating-entrances";
// @import "./animate/0.0.1/_flippers/flippers";
// @import "./animate/0.0.1/_specials/specials";
// @import "./animate/0.0.1/_lightspeed/lightspeed";
@import "./animate";

//除法
@function division($divisor,$dividend:2){
    @return $divisor/$dividend;
}

//loading
@include keyframes('bounce') {
    0%, 100% {
        @include transform(scale(0));
    }
    50% {
        @include transform(scale(1));
    }
}

.animate-start{
        @include animation(start 1s linear 2s infinite forwards);
    }

    @include keyframes('start'){
        0%{
            transform:scale(1,1);
        }
        50%{
            transform:scale(1.05,1.05);
        }
        100%{
            transform:scale(1,1);
        }
    }

//箭头
@include keyframes('arrow') {
    0%, 30% {
        opacity: 0;
        @include transform(translate(0, 8px));
    }
    60% {
        opacity: 1;
        @include transform(translate(0, 0));
    }
    100% {
        opacity: 0;
        @include transform(translate(0, -8px));
    }
}

//音乐播放
@include keyframes('music') {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

html, body, .mod-page, .floor-box {
    width: 100%;
    height: 100%;
}

.mod-page {
    position: relative;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: grab;
    overflow: hidden;
}

.mod-load{
    // background-color: #ffd203;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.btn-music{
    display:none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    background: url(../images/music-off.png) center center no-repeat;
    @include background-size(22px 22px);
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.btn-music-play{
    @include animation(music 1.2s linear infinite);
    background-image: url(../images/music-on.png);
}

.arrow {
    background: url('../images/arrow.png') no-repeat 50% 50%;
    width: 100%;
    height: 30px;
    position: fixed;
    left: 0;
    bottom: 20px;
    @include animation(arrow 1.5s infinite ease-in-out);
    z-index: 99;
    display:none;
    @include background-size(56px 30px);
}

.loading-box {
    $loadingBoxSize: 160px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-top: division(-$loadingBoxSize);
    margin-left: division(-$loadingBoxSize);
    z-index: 10;
    width: $loadingBoxSize;
    height: $loadingBoxSize;
    .double-bounce1, .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
    }
    .percent {
        position: absolute;
        width: $loadingBoxSize;
        height: $loadingBoxSize;
        text-align: center;
        line-height: $loadingBoxSize;
        font-size: 20px;
        color: #29130e;
    }
}

.floor-box {
    position: relative;
    .floor {
        position: relative;
        img{
            display: none;
            width: 100%;
            height: 100%;
        }
    }

    //生成楼层背景
    $floorLen: 10;
    @mixin makeFloorBg($floorLen) {
        @for $i from 1 through $floorLen {
            .floor-#{$i - 1}-animate{
                img{
                    display: block;
                    // position: absolute;
                    z-index: 2;
                }
                .bg{
                    background-repeat: no-repeat;
                    background-position: 50% 0%;
                    @include background-size(auto 100%);
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index:1;           
                }
            }
        }
    }
    @include makeFloorBg($floorLen);

    //desc定位底部
    // .desc{
    //     bottom: division(170px);
    //     left: 50%;
    //     margin-left:division(-640px,4);
    //     max-width: division(640px);
    // }

    // .floor-0-animate{
    //     // .logo{
    //     //     top: division(60px);
    //     //     left: 50%;
    //     //     margin-left: division(-44.5px,4);
    //     //     width: division(89px);
    //     // }
    //     // .desc{
    //     //     top: division(200px);
    //     //     left: 50%;
    //     //     margin-left: division(-469px,4);
    //     //     width: division(469px);
    //     // }
    //     // .bottom{
    //     //     bottom: division(220px);
    //     //     left: 0;
    //     //     width: division(640px);
    //     // }
    // }

    
}

